<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2022/5/13
  Time: 10:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../jeasyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jeasyui/themes/icon.css">
    <script type="text/javascript" src="../jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="../jeasyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jeasyui/easyui-lang-zh_CN.js"></script>

    <script>
        //检查图片的格式是否正确,同时实现预览
        function setImagePreview(obj, localImagId, imgObjPreview) {
            var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
            if (obj.value == '') {
                $.messager.alert("让选择要上传的图片!");
                return false;
            }
            else {
                var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用
                // 布尔型变量
                var isExists = false;
                //循环判断图片的格式是否正确
                for (var i in array) {
                    if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                        //图片格式正确之后，根据浏览器的不同设置图片的大小
                        if (obj.files && obj.files[0]) {
                            //火狐下，直接设img属性
                            imgObjPreview.style.display = 'block';
                            imgObjPreview.style.width = '400px';
                            imgObjPreview.style.height = '400px';
                            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                            imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
                        }
                        isExists = true;
                        return true;
                    }
                }
                if (isExists == false) {
                    $.messager.alert("上传图片类型不正确!");
                    return false;
                }
                return false;
            }
        }
    </script>


</head>
<body>
<div>
    选择图片:<input id="idFile" style="width:224px" runat="server" name="pic" οnchange="javascript:setImagePreview(this,localImag,preview);" type="file" />
</div>

</body>
</html>
